Vormisildid: Sisestusväljade Hädavajalikud Ligipääsetavusnõuded

Vormid on veebi lahutamatu osa. Alates lihtsatest kontaktivormidest kuni keerukate e-kaubanduse kassadeni võimaldavad need kasutajatel veebisaitide ja rakendustega suhelda. Halvasti kujundatud vormid võivad aga luua olulisi takistusi puuetega kasutajatele. Oluline element ligipääsetavate vormide loomisel on vormisiltide õige kasutamine. See juhend annab põhjaliku ülevaate vormisiltide ligipääsetavusnõuetest, tagades, et teie vormid on kasutatavad kõigile, olenemata nende võimetest.

Miks on Ligipääsetavad Vormisildid Olulised?

Ligipääsetavad vormisildid on olulised mitmel põhjusel:

• Kasutatavus: Selged ja lühikesed sildid aitavad kõigil kasutajatel mõista iga sisestusvälja eesmärki, parandades üldist kasutatavust.
• Ligipääsetavus: Sildid pakuvad olulist teavet puuetega kasutajatele, eriti neile, kes kasutavad abitehnoloogiaid nagu ekraanilugejad. Ilma korralike siltideta ei pruugi need kasutajad suuta vorme täita.
• WCAG vastavus: Veebisisu ligipääsetavuse suunised (WCAG) nõuavad, et kõigil vormi juhtelementidel oleksid seostatud sildid. Nende suuniste täitmine tagab, et teie veebisait on ligipääsetav ja paljudes jurisdiktsioonides seadustega kooskõlas.
• SEO: Kuigi see pole otsene järjestustegur, on ligipääsetavatel veebisaitidel tavaliselt parem kasutajakogemus, mis võib kaudselt parandada SEO tulemuslikkust.

WCAG Nõuete Mõistmine Vormisiltidele

WCAG pakub konkreetseid suuniseid vormide ligipääsetavuse tagamiseks. Siin on peamised nõuded, mis on seotud vormisiltidega:

WCAG 2.1 Edukriteerium 1.1.1 Mittetekstiline sisu (Tase A)

Kuigi see ei puuduta otseselt silte, rõhutab see kriteerium teksti alternatiivide pakkumise tähtsust kogu mittetekstilisele sisule, sealhulgas CAPTCHA-dele ja vormides kasutatavatele piltidele. Korralikult sildistatud vorm on nende alternatiivide konteksti pakkumiseks ülioluline.

WCAG 2.1 Edukriteerium 1.3.1 Info ja seosed (Tase A)

Esitluse kaudu edastatud teave, struktuur ja seosed peavad olema programmiliselt määratavad või tekstina kättesaadavad. See tähendab, et sildi ja selle vastava sisestusvälja vaheline seos peab olema HTML-koodis selgesõnaliselt määratletud.

WCAG 2.1 Edukriteerium 2.4.6 Pealkirjad ja sildid (Tase AA)

Pealkirjad ja sildid kirjeldavad teemat või eesmärki. Vormisildid pakuvad sisestusväljadele kirjeldavat konteksti, muutes kasutajatel vormi struktuuri mõistmise ja selle täpse täitmise lihtsamaks.

WCAG 2.1 Edukriteerium 3.3.2 Sildid või juhised (Tase A)

Sildid või juhised on esitatud, kui sisu nõuab kasutaja sisendit.

WCAG 2.1 Edukriteerium 4.1.2 Nimi, roll, väärtus (Tase A)

Kõigi kasutajaliidese komponentide (sealhulgas, kuid mitte ainult, vormielementide, linkide ja skriptide abil genereeritud komponentide) puhul peavad nimi ja roll olema programmiliselt määratavad; olekud, omadused ja väärtused, mida kasutaja saab määrata, peavad olema programmiliselt seadistatavad; ja teavitus nende elementide muudatustest on kättesaadav kasutajaagentidele, sealhulgas abitehnoloogiatele.

Parimad Praktikad Ligipääsetavate Vormisiltide Rakendamiseks

Siin on mitu parimat praktikat ligipääsetavate vormisiltide loomiseks:

1. Kasutage elementi <label>

Element <label> on peamine viis tekstisildi seostamiseks sisestusväljaga. See loob semantilise ja struktuurilise seose sildi ja juhtnupu vahel. Elemendi <label> atribuut for peaks vastama vastava sisestusvälja atribuudile id.

Näide:

<label for="name">Nimi:</label>
<input type="text" id="name" name="name">

Vale näide (vältida):

<span>Nimi:</span>
<input type="text" id="name" name="name">

Elemendi span kasutamine label asemel ei loo vajalikku programmilist seost, muutes selle ekraanilugejatele ligipääsmatuks.

2. Seostage Sildid Sisestusväljadega Selgesõnaliselt

Tagage selge ja selgesõnaline seos sildi ja sisestusvälja vahel, kasutades atribuute for ja id, nagu on näidatud ülaltoodud näites.

3. Paigutage Sildid Korrektselt

Siltide paigutus võib mõjutada kasutatavust. Üldiselt tuleks sildid paigutada:

• Sisestusvälja kohale: See on sageli kõige ligipääsetavam ja kasutajasõbralikum variant, eriti tekstiväljade ja tekstialade puhul.
• Sisestusväljast vasakule: Levinud, kuid võib olla vähem tõhus nägemispuudega kasutajatele, kellel võib olla raskusi lehe skaneerimisega.
• Raadionuppude ja märkeruutude puhul: Sildid tuleks paigutada juhtnupust paremale.

Võtke siltide paigutamisel arvesse kultuurilisi norme. Mõnes keeles paigutatakse sildid traditsiooniliselt pärast sisestusvälja. Kohandage oma disain nende eelistuste järgi.

4. Pakkuge Selgeid ja Lühikesi Silte

Sildid peaksid olema lühikesed, kirjeldavad ja kergesti mõistetavad. Vältige žargooni või tehnilisi termineid, mis võivad kasutajaid segadusse ajada. Näiteks "UserID" asemel kasutage "Kasutajanimi" või "E-posti aadress". Kaaluge lokaliseerimist. Veenduge, et teie silte oleks lihtne tõlkida erinevatesse keeltesse, säilitades samal ajal nende tähenduse.

5. Kasutage Vajadusel ARIA Atribuute

ARIA (Accessible Rich Internet Applications) atribuudid võivad parandada vormielementide ligipääsetavust, eriti keerulistes stsenaariumides. Kasutage ARIA-t siiski kaalutletult ja ainult siis, kui natiivsetest HTML-elementidest ja atribuutidest ei piisa.

• aria-label: Kasutage seda atribuuti sildi pakkumiseks, kui nähtav silt pole võimalik või praktiline.
• aria-labelledby: Kasutage seda atribuuti, et viidata lehel oleva olemasoleva elemendi ID-le, mis toimib sildina.
• aria-describedby: Kasutage seda atribuuti lisateabe või juhiste pakkumiseks sisestusväljale. See on kasulik konteksti pakkumiseks või valideerimisreeglite selgitamiseks.

Näide aria-label'i kasutamisest:

<input type="search" aria-label="Otsi veebisaidilt">

Näide aria-labelledby kasutamisest:

<h2 id="newsletter-title">Uudiskirja Tellimus</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Sisestage oma e-posti aadress">

6. Grupeerige Seotud Vormielemendid <fieldset> ja <legend> abil

Element <fieldset> grupeerib seotud vormi juhtnupud ja element <legend> annab fieldsetile pealkirja. See parandab vormi struktuuri ja muudab kasutajatel erinevate sisestusväljade vaheliste seoste mõistmise lihtsamaks.

Näide:

<fieldset>
  <legend>Kontaktandmed</legend>
  <label for="name">Nimi:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">E-post:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Pakkuge Selgeid Veateateid

Kui kasutajad teevad vormi täitmisel vigu, pakkuge selgeid ja informatiivseid veateateid, mis selgitavad, mis läks valesti ja kuidas viga parandada. Seostage need veateated vastavate sisestusväljadega, kasutades ARIA atribuute nagu aria-describedby.

Näide:

<label for="email">E-post:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Palun sisestage kehtiv e-posti aadress.</span>

Veenduge, et veateade oleks visuaalselt eristuv (nt värvi või ikoonide abil) ja programmiliselt ligipääsetav abitehnoloogiatele.

8. Kasutage Piisavat Värvikontrasti

Tagage piisav värvikontrast sildi teksti ja taustavärvi vahel, et täita WCAG nõudeid. Kasutage värvikontrasti analüsaatorit, et kontrollida, kas kontrastsussuhe vastab miinimumnõuetele (4.5:1 tavalise teksti ja 3:1 suure teksti puhul). See aitab vaegnägijatel silte kergemini lugeda.

9. Tagage Klaviatuuri Ligipääsetavus

Kõik vormielemendid peaksid olema ligipääsetavad ainult klaviatuuri abil. Kasutajad peaksid saama vormis navigeerida Tab-klahvi abil ja suhelda vormi juhtnuppudega tühiku või Enter-klahvi abil. Testige oma vorme põhjalikult klaviatuuriga, et tagada korralik klaviatuuri ligipääsetavus.

10. Testige Abitehnoloogiatega

Parim viis tagada oma vormide ligipääsetavus on testida neid abitehnoloogiatega nagu ekraanilugejad (nt NVDA, JAWS, VoiceOver). See aitab teil tuvastada ligipääsetavusprobleeme, mis ei pruugi visuaalsel kontrollimisel ilmneda. Kaasake puuetega kasutajad oma testimisprotsessi, et saada väärtuslikku tagasisidet.

Näited Ligipääsetavate Vormisiltide Rakendustest

Näide 1: Lihtne Kontaktivorm (Rahvusvaheline Perspektiiv)

Mõelge kontaktivormile globaalsele publikule. Sildid peaksid olema selged, lühikesed ja kergesti tõlgitavad.

<form>
  <label for="name">Täisnimi:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">E-posti aadress:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">Riik:</label>
  <select id="country" name="country">
    <option value="">Vali riik</option>
    <option value="us">Ameerika Ühendriigid</option>
    <option value="ca">Kanada</option>
    <option value="uk">Ühendkuningriik</option>
    <option value="de">Saksamaa</option>
    <option value="fr">Prantsusmaa</option>
    <option value="jp">Jaapan</option>
    <option value="au">Austraalia</option>
    <!-- Lisa veel riike -->
  </select><br><br>

  <label for="message">Sõnum:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="Esita">
</form>

Pange tähele "Täisnimi" kasutamist lihtsalt "Nime" asemel selguse huvides, eriti kultuurides, kus perekonnanimed eelnevad eesnimedele.

Näide 2: E-kaubanduse Kassa Vorm

E-kaubanduse kassa vormid nõuavad sageli tundlikku teavet. Selged sildid ja juhised on usalduse loomiseks ja ligipääsetavuse tagamiseks üliolulised.

<form>
  <fieldset>
    <legend>Tarneaadress</legend>
    <label for="shipping_name">Täisnimi:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">Aadress:</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">Linn:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">Postiindeks/ZIP-kood:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Riik:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Vali riik</option>
      <option value="us">Ameerika Ühendriigid</option>
      <option value="ca">Kanada</option>
      <!-- Lisa veel riike -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Makseinfo</legend>
    <label for="card_number">Krediitkaardi number:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Aegumiskuupäev (KK/AA):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="KK/AA"><br><br>

    <label for="cvv">CVV:</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="Esita tellimus">
</form>

Fieldset'ide ja legend'ide kasutamine organiseerib vormi selgelt loogilistesse osadesse. Kohatäitja tekst annab täiendavaid juhiseid, kuid pidage meeles, et kohatäitja teksti ei tohiks kasutada siltide asendajana.

Näide 3: Registreerimisvorm ARIA Atribuutidega

Mõelge registreerimisvormile, kus hüüdnimi on vabatahtlik. ARIA atribuutide abil saame pakkuda täiendavat konteksti.

<form>
  <label for="username">Kasutajanimi:</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Parool:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Hüüdnimi (vabatahtlik):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">See hüüdnimi kuvatakse avalikult.</span><br><br>

  <input type="submit" value="Registreeri">
</form>

Atribuut aria-describedby seob hüüdnime sisestusvälja span-elemendiga, mis annab lisateavet selle kohta, kuidas hüüdnime kasutatakse.

Tööriistad Vormi Ligipääsetavuse Testimiseks

Mitmed tööriistad aitavad teil hinnata oma vormide ligipääsetavust:

• Accessibility Insights: Brauseri laiendus, mis tuvastab veebilehtede ligipääsetavusprobleeme.
• WAVE (Web Accessibility Evaluation Tool): Veebitööriist, mis hindab veebilehtede ligipääsetavusvigu.
• axe DevTools: Brauseri laiendus, mis teostab automatiseeritud ligipääsetavuse testimist.
• Ekraanilugejad (NVDA, JAWS, VoiceOver): Ekraanilugejatega testimine on oluline ligipääsetavusprobleemide tuvastamiseks, mis ei pruugi automatiseeritud testimise käigus ilmneda.

Kokkuvõte

Ligipääsetavad vormisildid on kaasavate veebikogemuste loomiseks hädavajalikud. Järgides selles juhendis kirjeldatud parimaid tavasid, saate tagada, et teie vormid on kasutatavad kõigile, olenemata nende võimetest. Ligipääsetavuse eelistamine ei too kasu mitte ainult puuetega kasutajatele, vaid parandab ka teie veebisaidi üldist kasutatavust kõigi kasutajate jaoks. Ärge unustage oma vorme järjepidevalt testida abitehnoloogiatega ja kaasata puuetega kasutajaid oma testimisprotsessi, et saada väärtuslikku tagasisidet ja pidevalt parandada oma veebisaidi ligipääsetavust.

Ligipääsetavuse omaksvõtmine ei ole ainult vastavuse küsimus; see on kaasavama ja õiglasema veebi loomine kõigile. Investeerides ligipääsetavasse vormidisaini, näitate pühendumust kaasavusele ja loote parema kasutajakogemuse kõigile.